import React from 'react'
import { Table, Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
import { BorrowStatus } from '~/constants'
import PopoverColumn from '~/components/popover-column'

const colums: any = ({ handleNavToProperty }: any) => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '案件编号',
    dataIndex: 'caseNo',
    align: 'center',
    render: (caseNo: any, record: any) => (
      <PopoverColumn record={record}>
        <a>{caseNo}</a>
      </PopoverColumn>
    )
  },
  {
    title: '案件名称',
    dataIndex: 'caseName',
    align: 'center',
    render: (caseName: any, record: any) => (
      <PopoverColumn record={record}>
        <a>{caseName}</a>
      </PopoverColumn>
    )
  },
  {
    title: '借用人员',
    align: 'center',
    dataIndex: 'borrowUserName'
  },
  {
    title: '借用时间',
    align: 'center',
    dataIndex: 'lendTime',
    key: 'age',
    render: (lendTime: any) => <div>{moment(lendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
  },
  {
    title: '借用状态',
    align: 'center',
    dataIndex: 'borrowStatus',
    key: 'age',
    render: (borrowStatus: any) => <div>{BorrowStatus.get(borrowStatus)}</div>
  },
  {
    title: '操作',
    dataIndex: 'age4',
    align: 'center',
    key: 'age',
    render: (_: any, record: any) => (
      <Button type="primary" size="small" onClick={() => handleNavToProperty(record)}>
        归还
      </Button>
    )
  }
]

const WaitingList = ({ waitInformCastList }: any) => {
  const navigate = useNavigate()

  const handleNavToProperty = (record: any) => {
    record.caseState = 1
    navigate('/return-property-detail', { state: record })
  }
  return (
    <div>
      <Table
        pagination={{
          size: 'default',
          total: waitInformCastList.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }}
        rowKey="id"
        bordered
        dataSource={waitInformCastList}
        columns={colums({ handleNavToProperty })}
      />
    </div>
  )
}

export default WaitingList
